<script lang="ts" setup>
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { getjksxxdList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const dayjs = useDayjs()
const listOne = ref<any[]>([])
const list = ref<any[]>([])
const queryParams = reactive(
  {
    page: {
      rownumber: 5,
      pageNo: 1,
      total: 0,
    },
    condition: [{ colName: 'positions', ruleType: 'inset', value: '首页' }],
  },
)
function upper() {
  if (queryParams.page.pageNo !== 1) {
    queryParams.page.pageNo--
    getData()
  }
  else {
    ElMessage.warning('没有更多了~')
  }
}
function next() {
  if (queryParams.page.pageNo !== Math.ceil(queryParams.page.total / queryParams.page.rownumber)) {
    queryParams.page.pageNo++
  }
  else {
    queryParams.page.pageNo = 1
    // ElMessage.warning('没有更多了~')
  }
  getData()
}
function getData() {
  getjksxxdList(queryParams).then((res) => {
    list.value = res.data.slice(1, 4)
    listOne.value = res.data.slice(0, 1)
    queryParams.page.total = res.page.total
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
})
function loadMore() {
  navigateTo({
    path: `/peopleHealth/healthyShaanxi`,
    query: {
    },
  })
}
function loadDet(item) {
  navigateTo({
    path: `/peopleHealth/healthyShaanxiDetail`,
    query: {
      id: item.id,
    },
    // query: {
    //   data: encode(item),

    // },
  })
}
</script>

<template>
  <div class="h-140 bg-#E7F0F5">
    <div class="flex items-end justify-center pt-30px">
      <span class="mr-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
      <span class="px-2 font-bold" text="#1D2128 22px">健康陕西</span>
      <span class="ml-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
    </div>
    <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
      HEALTHY SHANXI
    </div>
    <div class="flex justify-between px-60 py-6">
      <div v-for="item in listOne" class="relative h-284px w-34% cursor-pointer" @click="loadDet(item)">
        <img class="h-100% w-100%" :src="item.cover_file_name" alt="">
        <div class="absolute bottom-0 h-60px w-100% flex items-center justify-between bg-[#03101010] p-10px font-semibold" text="#fff 16px">
          <div class="w-70% truncate">
            {{ item.title_name }}
          </div>
          <div class="">
            {{ dayjs(item.release_time).format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
      <div class="w-64% flex justify-between">
        <div v-for="item in list" class="w-32% cursor-pointer" hover="text-#35B389" @click="loadDet(item)">
          <img class="h-185px w-100%" :src="item.cover_file_name" alt="">
          <div class="h-35% bg-#fff">
            <div class="line-clamp-2 text-ellipsis px-5px pt-10px">
              {{ item.title_name }}
            </div>
            <div class="px-5px py-10px" text="#333">
              {{ dayjs(item.release_time).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-between px-80 py-6">
      <div>
        <el-button color="#35B389" plain @click="loadMore">
          查看更多
        </el-button>
      </div>
      <div>
        <el-button color="#35B389" :icon="ArrowLeft" plain :disabled="queryParams.page.pageNo === 1" @click="upper()" />
        <el-button color="#35B389" :icon="ArrowRight" style="color:#fff" @click="next()" />
      </div>
    </div>
  </div>
</template>
